let newsData = [
    { src: "./img/news/1.png", title: "昌平一写字楼因疫情封闭，快餐店里出现暖心一幕", date: "2021-11-01" },
    { src: "./img/news/2.png", title: "一分钱吃小皇堡套餐 汉堡王加入“ 爱心餐公益计划”，一块谢谢城市美容师！", date: "2021-10-28" },
    { src: "./img/news/3.png", title: "炎魔放招，无辣不欢！汉堡王发布2021秋季新品", date: "2021-10-13" },
    { src: "./img/news/4.png", title: "沪2021年早餐工程示范点拟入围名单公示 26家汉堡王餐厅上榜", date: "2021-10-09" },
    { src: "./img/news/5.png", title: "吃堡再搬砖！汉堡王宣布入驻钉钉APP！", date: "2021-10-09" },
    { src: "./img/news/6.png", title: "关爱环卫工人，三伏天3000套清凉套餐送城市美容师", date: "2021-08-02" },
    { src: "./img/news/7.png", title: "新“ 王”亮相 汉堡王品牌全面升级", date: "2021-05-18" },
    { src: "./img/news/8.png", title: "“ 火烤专家”汉堡王联手B站《 炎炎消防队》热血燃炸突破次元壁", date: "2021-02-18" },
    { src: "./img/news/9.png", title: "《 经济观察报》授予汉堡王“ 年度卓越环保公益企业”", date: "2021-02-18" },
    { src: "./img/news/10.png", title: "好吃不贵！汉堡王首推“ 真香植物基皇堡” ", date: "2020-12-23" },
    { src: "./img/news/11.png", title: "灯火计划走进青州市邵庄镇文登小学", date: "2020-12-14" },
    { src: "./img/news/12.png", title: "实力明星张艺兴代言汉堡王并出任“ 公益大使”", date: "2020-11-05" },
    { src: "./img/news/13.png", title: "带你走进火烤专家汉堡王！", date: "2020-10-11" },
    { src: "./img/news/14.png", title: "汉堡王面向5000万会员征集“ 堡堡监督员”，一起“ 堡”卫食品安全", date: "2020-10-10" },
    { src: "./img/news/15.png", title: "助力精准文化扶贫，汉堡王中国联手基金会推出“ 灯火计划”", date: "2020-09-14" },
    { src: "./img/news/16.png", title: "汉堡王关于3.15晚会的声明", date: "2020-07-17" },
    { src: "./img/news/17.png", title: "抗击新冠病毒，我们是认真的！", date: "2020-06-12" },
    { src: "./img/news/18.png", title: "机器人上岗！汉堡王引入高科技  无接触服务再升级", date: "2020-03-04" },
    { src: "./img/news/19.png", title: "汉堡王推出无接触服务，爱你们就离你们远一点", date: "2020-02-11" },
    { src: "./img/news/20.png", title: "为白衣英雄送免费餐，非常时期汉堡王和你们一起扛！", date: "2020-02-10" },
    { src: "./img/news/21.png", title: "众志成城，汉堡王中国捐赠100万元助力疫情防控", date: "2020-01-29" },
    { src: "./img/news/22.png", title: "一堡转运 这次汉堡王和“ 倒霉蛋”杠上了！", date: "2020-01-15" },
    { src: "./img/news/23.png", title: "汉堡王中国入选“ 2019中国典范雇主”", date: "2019-10-12" },
    { src: "./img/news/24.png", title: "关于“ 免费皇堡活动”的公告", date: "2019-10-12" },
    { src: "./img/news/25.png", title: "大手牵小手，爸妈办公室走一走", date: "2019-08-28" },
    { src: "./img/news/26.png", title: "风雨中捡3万巨款 夫妻俩苦等半小时", date: "2019-08-21" },
    { src: "./img/news/27.png", title: "汉堡王等23家餐饮企业被中烹协点赞", date: "2019-06-27" },
    { src: "./img/news/28.png", title: "6.5世界环境日支付宝蚂蚁森林 x 汉堡王公益林行动 -和堡堡一起边吃皇堡边做环保", date: "2019-06-05" },
    { src: "./img/news/29.png", title: "汉堡王首次启动总部管培生招募", date: "2019-06-27" },
    { src: "./img/news/30.png", title: "汉堡王400员工关怀热线火热上线", date: "2019-04-03" },
    { src: "./img/news/31.png", title: "汉堡王迎第1000家店 在华扩张还将进一步提速", date: "2018-12-30" },
    { src: "./img/news/32.png", title: "有意加大在华投资 汉堡王中国董事会主席来中国看市场", date: "2018-06-12" },
    { src: "./img/news/33.png", title: "春节不“ 尬过”，“ 留守歪果仁”春节处境尴尬 汉堡王出招随手拯救“ 歪果仁”", date: "2018-04-26" },
    { src: "./img/news/34.png", title: "汉堡王斩获“ 2017中国最具发展潜力雇主” 发展前景是吸引人才的核心", date: "2018-04-16" }
]

// 渲染数据
let template = arr => {
    let news = document.querySelector(".news-box ul");
    let str = ``;
    for (let i = 0; i < arr.length; i++) {
        str += `
            <li>
                <img src="${arr[i].src}" alt="图片">
                <div class="txt-box">
                    <p>${arr[i].title}</p>
                    <span>${arr[i].date}</span>
                </div>
            </li>
        `
    }
    news.innerHTML = str;
}
template(newsData);

// 添加属性
let addClass = () => {
    for (let i = 0; i < 34; i++) {
        if (i < 6) {
            $(".news-box ul li").eq(i).addClass("news-item").attr("pageCode", "0");
        } else if (i >= 6 && i < 12) {
            $(".news-box ul li").eq(i).addClass("news-item2").attr("pageCode", "1");
        } else if (i >= 12 && i < 18) {
            $(".news-box ul li").eq(i).addClass("news-item3").attr("pageCode", "2");
        } else if (i >= 18 && i < 24) {
            $(".news-box ul li").eq(i).addClass("news-item4").attr("pageCode", "3");
        } else if (i >= 24 && i < 30) {
            $(".news-box ul li").eq(i).addClass("news-item5").attr("pageCode", "4");
        } else if (i >= 30) {
            $(".news-box ul li").eq(i).addClass("news-item6").attr("pageCode", "5");
        }
    }
}
addClass();

// 绑定事件(动态)
let addClick = () => {
    // 页码索引值
    let pageIndex = 0;
    let allow = { opacity: "1", cursor: "pointer" };
    let notAllow = { opacity: "0.6", cursor: "not-allowed" };
    // 点击增减页码索引值
    $(".page-box").on("click", "div", function () {
        // 点击第一页时，页码索引值为0
        if ( $(this).index() == 0 ) {
            pageIndex = 0;
        // 点击上一页时，页码索引值减1
        } else if ( $(this).index() == 1 ) {
            if (pageIndex <= 0) {
                return;
            }
            pageIndex--;
        // 点击下一页时，页码索引值加1
        } else if ( $(this).index() == 3 ) {
            if (pageIndex >= 5) {
                return;
            }
            pageIndex++;
        // 点击最后一页时，页码索引值为5
        } else {
            pageIndex = 5;
        }
        // console.log(pageIndex);

        // 指定页面显示按钮不可选
        if (pageIndex == 0) {
            $(".first, .last").css(notAllow);
            $(".next, .final").css(allow);
        } else if (pageIndex == 5) {
            $(".first, .last").css(allow);
            $(".next, .final").css(notAllow);
        } else {
            $(".first, .last").css(allow);
            $(".next, .final").css(allow);
        }

        // 切换页面
        // 显示当前页面的元素
        $(`.news-box ul li[pageCode=${pageIndex}]`).show();
        // 隐藏非当前页面的元素
        $(`.news-box ul li[pageCode!=${pageIndex}]`).hide();
        // 高亮显示4当前页面的页码
        $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
    })
        
    // 页码切换
    $(".page").on("click", "li", function () {
        // 将页码按钮索引值赋给页码索引值
        pageIndex = $(this).index();
        // 切换页面
        $(`.news-box ul li[pageCode=${pageIndex}]`).show();
        $(`.news-box ul li[pageCode!=${pageIndex}]`).hide();
        $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");

        // 指定页面显示按钮不可选
        if (pageIndex == 0) {
            $(".first, .last").css(notAllow);
            $(".next, .final").css(allow);
        } else if (pageIndex == 5) {
            $(".first, .last").css(allow);
            $(".next, .final").css(notAllow);
        } else {
            $(".first, .last").css(allow);
            $(".next, .final").css(allow);
        }
    })
}
addClick();



// 绑定事件(因为判断不了属性所以暂时是写死版本！！！)
// let addClick = () => {
//     // 切换页码索引值
//     let pageIndex = 0;
//     let allow = { opacity: "1", cursor: "pointer" };
//     let notAllow = { opacity: "0.6", cursor: "not-allowed" };
//     $(".page-box").on("click", "div", function () {
//         if ( $(this).index() == 0 ) {
//             pageIndex = 0;
//         } else if ( $(this).index() == 1 ) {
//             if (pageIndex <= 0) {
//                 return;
//             }
//             pageIndex--;
//         } else if ( $(this).index() == 3 ) {
//             if (pageIndex >= 5) {
//                 return;
//             }
//             pageIndex++;
//         } else {
//             pageIndex = 5;
//         }
//         // console.log(pageIndex);

//         // 切换页面
//         if (pageIndex == 0) {
//             $(".first, .last").css(notAllow);
//             $(".next, .final").css(allow);
//             $(".news-item").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//         if (pageIndex == 1) {
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//             $(".news-item2").show();
//             $(".news-item, .news-item3, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//         if (pageIndex == 2) {
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//             $(".news-item3").show();
//             $(".news-item2, .news-item, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//         if (pageIndex == 3) {
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//             $(".news-item4").show();
//             $(".news-item2, .news-item3, .news-item, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//         if (pageIndex == 4) {
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//             $(".news-item5").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//         if (pageIndex == 5) {
//             $(".first, .last").css(allow);
//             $(".next, .final").css(notAllow);
//             $(".news-item6").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item5, .news-item").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//         }
//     })
        
//     // 页码切换
//     $(".page").on("click", "li", function () {
//         if ($(this).index() == 0) {
//             pageIndex = 0;
//             $(".news-item").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(notAllow);
//             $(".next, .final").css(allow);
//         }
//         if ($(this).index() == 1) {
//             pageIndex = 1;
//             $(".news-item2").show();
//             $(".news-item, .news-item3, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//         }
//         if ($(this).index() == 2) {
//             pageIndex = 2;
//             $(".news-item3").show();
//             $(".news-item2, .news-item, .news-item4, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//         }
//         if ($(this).index() == 3) {
//             pageIndex = 3;
//             $(".news-item4").show();
//             $(".news-item2, .news-item3, .news-item, .news-item5, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//         }
//         if ($(this).index() == 4) {
//             pageIndex = 4;
//             $(".news-item5").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item, .news-item6").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(allow);
//             $(".next, .final").css(allow);
//         }
//         if ($(this).index() == 5) {
//             pageIndex = 5;
//             $(".news-item6").show();
//             $(".news-item2, .news-item3, .news-item4, .news-item5, .news-item").hide();
//             $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
//             $(".first, .last").css(allow);
//             $(".next, .final").css(notAllow);
//         }
//     })
// }
// addClick();